<template>
  <a-row :gutter="[0, 30]">
    <a-col :span="24"><Header></Header></a-col>
    <a-col :span="24" class="top-box">
    <div style="border-bottom:1px solid #ccc;font-size: 20px;">养生热榜</div>
      <ModulePages></ModulePages>
  </a-col>
  <a-col :span="24" class="top-box">
    <div style="border-bottom:1px solid #ccc;font-size: 20px;">中餐热榜</div>
      <ModulePages></ModulePages>
  </a-col>
    <a-col :span="6">
      <div class="top-box">
        <div class="top-title">
          <span>舆情热搜</span>
          <span class="top-title-subtitle" @click="handleRefish">
            <SyncOutlined />点击刷新
          </span>
        </div>
        <div>
          <div class="top-content" v-for="(item, index) in data" :key="index">          
            <VerticalAlignTopOutlined
              class="top-content-left"
              v-if="index === 0"
            />
            <span
              v-else
              class="top-content-left"
              :style="{ color: index >= 4 && outColor }"
              >{{ index }}</span
            >
            <div class="top-content-middle">
              {{ item.label }}
            </div>
            <div class="top-content-num">{{ item.account }}</div>
            <div class="top-content-right" v-show="item.type">
              <span :style="{ background: setIconColor(item.type) }">{{
                setType(item.type)
              }}</span>
            </div>
          </div>
        </div>
      </div>
    </a-col>
    <a-col :span="16" :offset="2">
      <!-- <div style="background-color: #fff;"> -->
      <charts :options="fwl" style="background-color: #fff"></charts>
      <!-- </div> -->
    </a-col>
  </a-row>
</template>
<script setup>

import { computed, onMounted, ref } from "vue";
import Charts from "@/components/charts";
import Header from "./components/header.vue";
import ModulePages from './components/modulePages.vue'
import { topSearch } from "@/api/topSearch";
const fwl = ref();
const data = ref([]);

const setType = (type) => {
  let text = "";
  switch (type) {
    case "hot":
      text = "热";
      break;
    case "new":
      text = "新";
      break;
    case "shang":
      text = "商";
      break;
    case "boom":
      text = "爆";
      break;
    default:
      break;
  }
  return text;
};

const setIconColor = (type) => {
  let color = "";
  switch (type) {
    case "hot":
      color = "rgb(255, 148, 6)";
      break;
    case "new":
      color = "rgb(255, 56, 82)";
      break;
    case "shang":
      color = "rgb(0, 183, 238)";
      break;
    case "boom":
      color = "rgb(189, 0, 0)";
      break;
    default:
      break;
  }
  return color;
};
const outColor = computed(() => "#ff8200");
const topSearchFn = (type = "1") => {
  topSearch(type).then((res) => {
    const { code = null } = res;
    if (code === 200) {
      data.value = res.data?.map((e) => ({
        label: e.title,
        account: e.hits,
        type: e.imgType,
      }));
    }
  });
};
const handleRefish = () => {
  const num = Math.floor(Math.random() * (4 - 1 + 1)) + 1;
  topSearchFn(num);
};
onMounted(() => {
  topSearchFn();
  console.log(data.value);
});
</script>

<style lang="scss" scoped>
.top-box {
  padding: 12px 14px 8px;
  border: 1px solid #f7f7f7;
  background-color: #fff;
  border-radius: 10px;
  cursor: pointer;
  // transform: $base-transition;
  &:hover {
    box-shadow: 0 1px 2px -2px #00000029, 0 3px 6px #0000001f,
      0 5px 12px 4px #00000017;
  }
}
.top-title {
  display: flex;
  justify-content: space-between;
  align-content: center;
  &-subtitle {
    color: #ccc;
  }
}
.top-content {
  position: relative;
  padding: 0 $vab-padding;
  display: flex;
  align-items: center;
  margin: 12px 0;
  // &:hover{
  //   background: #faa;
  // }
  &-left {
    position: absolute;
    top: 50%;
    left: 0;
    width: 20px;
    margin: 0 0 0 -3px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
    font-size: $base-font-size-bigger;
    color: #f26d5f;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  }
  @mixin test {
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  &-middle {
    overflow: hidden;
    margin: 0 10px;
    @include test;
  }
  &-num {
    @include test;
    color: #ccc;
  }
  &-right {
    position: absolute;
    right: 0;
    top: 50%;
    margin: -10px 0 0;
    & > span {
      color: #fff;
      transform: scale(0.8);
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 4px;
      line-height: 20px;
      text-align: center;
      font-size: 14px;
    }
  }
}
</style>
